<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<style>
		.formSex input{
			display: none;
			margin-top: 10px;
		}
		.formSex label{
			box-sizing: border-box;
			position: relative;
			margin-right: 34px;
			margin-top: 10px;
		}
		.formSex label::before{
			display: inline-block;
			content: "";
			width: 16px;
			height: 16px;
			border-radius: 50%;
			border: 1px solid rgb(219, 219, 219);
			margin-right: 6px;
			vertical-align: bottom;
		}
		.formSex input:checked+label::before{
			border: 1px solid #fff;
			background-color: #fff;
		}
		.formSex input:checked+label::after{
			display: inline-block;
			content: "";
			width: 18px;
			height: 18px;
			border-radius: 50%;
			position: absolute;
			left: 0;
			bottom: 0;
			background-color: #42ff6c;
		}
	</style>
<title>小区物业管理系统-业主注册</title>

<meta
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
	name="viewport">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
</head>

<body class="hold-transition register-page">
<div class="register-box">
	<div class="register-logo">
		<a href="#"><b>XX小区</b>业主注册页面</a>
	</div>

	<div class="register-box-body">
		<p class="login-box-msg">业主注册</p>

		<form id="subform" action="${pageContext.request.contextPath}/user/register.do" method="post">
			<div class="form-group has-feedback">
				<input id="name" type="text" class="form-control" placeholder="姓名" name="username">
				<span class="glyphicon glyphicon-user form-control-feedback"></span>
			</div>
			<div class="form-group has-feedback">
				<input id="pwd" type="password" class="form-control" placeholder="密码" name="userpwd">
				<span class="glyphicon glyphicon-lock form-control-feedback"></span>
			</div>
			<div class="form-group has-feedback">
				<input id="repwd" type="password" class="form-control" placeholder="重复输入密码">
				<span class="glyphicon glyphicon-log-in form-control-feedback"></span>
			</div>
			<div class="form-group has-feedback">
				<input id="phone" class="form-control" placeholder="手机号码" name="userphone">
				<span class="glyphicon glyphicon-phone-alt form-control-feedback"></span>
			</div>
			<div class="formSex">
				<span>性别：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
				<input type="radio" id="male" name="usersex" class="sex formInput" value="男" checked>
				<label for="male">男</label>
				<input type="radio" id="female" name="usersex" class="sex formInput" value="女">
				<label for="female">女</label>
			</div>

			<div class="row">
				<div class="col-xs-8">
					<div class="checkbox icheck">
						<label>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="cb"> 点击表示同意 <a href="#">登录协议</a>
						</label>
					</div>
				</div>
			</div>
			<span id="tips" style="color:red;font-size: small"></span>
		</form>
			<button id="dosubmit" class="btn btn-primary btn-block btn-flat" onclick="check()">注册</button>
		<%--<button id="dosubmit" onclick="check()">注册</button>--%>
		<%--<div class="social-auth-links text-center">--%>
			<%--<p>- OR -</p>--%>
			<%--<a href="#" class="btn btn-block btn-social btn-facebook btn-flat"><i class="fa fa-facebook"></i> Sign up using--%>
				<%--Facebook</a>--%>
			<%--<a href="#" class="btn btn-block btn-social btn-google btn-flat"><i class="fa fa-google-plus"></i> Sign up using--%>
				<%--Google+</a>--%>
		<%--</div>--%>

		<br><a href="${pageContext.request.contextPath}/pages/user-login.jsp" class="text-center">已经注册业主？点击返回登录</a>
	</div>
	<!-- /.form-box -->
</div>
<!-- /.register-box -->

<!-- jQuery 3 -->
<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="../../plugins/iCheck/icheck.min.js"></script>
<script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' /* optional */
        });
    });
	function check() {
        var name = document.getElementById("name").value;
        var pwd = document.getElementById("pwd").value;
        var repwd = document.getElementById("repwd").value;
        var phone = document.getElementById("phone").value;
        var cb = document.getElementById("cb");

        var phone_reg = /^[1][0-9][0-9]{9}$/;
        var phone_re = new RegExp(phone_reg);
        var name_reg = /^([u4E00-u9FA5])*$/;

        if(name=="")document.getElementById("tips").innerHTML="姓名不能为空！";
		else if(pwd=="")document.getElementById("tips").innerHTML="密码不能为空！";
        else if(repwd=="")document.getElementById("tips").innerHTML="密码不能为空！";
        else if(phone=="")document.getElementById("tips").innerHTML="手机号不能为空！";
        else{
            if(name.length==1||name_reg.test(name)==true)document.getElementById("tips").innerHTML="姓名格式错误！";

            else if(pwd!=repwd)document.getElementById("tips").innerHTML="两次密码输入不一致，请重新输入！";
            else{
            	if(!phone_re.test(phone))document.getElementById("tips").innerHTML="手机号格式错误！";
            	else if(!cb.checked)document.getElementById("tips").innerHTML="请认真阅读登录协议并勾选！";
            	else {
            	    alert("注册成功！请登录");
            	    document.getElementById("subform").submit();
            	}
            }
		}
    }
</script>
</body>

</html>